<template>
    <view class="container">
        <view class="header" v-if='userInfo'>
            <image class="avater" :src="userAvatar" mode="aspectFill"></image>
            <view class="info-box">
                <view class="row">
                    <view class="name">
                        {{userName}}
                    </view>
                    <view class="gender" :class="genderClass">
                        <uni-icons v-if='userInfo.gender' custom-prefix="iconfont" type='icon-e-nansheng' size='20'
                            color='#fff'></uni-icons>
                        <uni-icons v-else custom-prefix="iconfont" type='icon-e-nvsheng' size='20'
                            color="#fff"></uni-icons>
                    </view>
                </view>
                <view class="row">
                    <view class="intro">
                        {{userIntro}}
                    </view>
                </view>
            </view>
        </view>
        <view class="header" v-else @click="tapLogin">
            <image class="avater" src="/static/images/logo.png" mode="aspectFill"></image>
            <view class="info-box">
                <view class="row">
                    <view class="login">
                        点击登录，探寻精彩
                    </view>
                </view>
            </view>
        </view>
        <view class="section">
            <view class="row" v-for='(item, index) in buttonList' :key="index" @click="tapItem(item)">
                <view class="title">
                    {{item.title}}
                </view>
                <uni-icons type="right" color="#999" size="24"></uni-icons>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        gotoLoginPage,
        gotoMyClassPage
    } from "../../common/services/pageRoute.js";
    import {
        watchUserInfoChange,
        removeUserInfoChangeWatch,
        saveUserInfo,
        saveToken
    } from "../../common/services/user-service.js"
    import {
        getRandomInt
    } from "../../common/utils/util.js";
    import {
        logout
    } from "../login/services/index.js";
    export default {
        data() {
            return {
                userInfo: null,
            };
        },
        onLoad() {
            watchUserInfoChange((userInfo) => {
                this.userInfo = userInfo
            }, this)
        },
        onUnload() {
            removeUserInfoChangeWatch(this);
        },
        computed: {
            buttonList: function() {
                let result = [];
                if (this.userInfo) {
                    result.push({
                        title: "我的订阅",
                        flag: "myClass"
                    })
                }
                result.push({
                    title: "退出",
                    flag: "logout"
                })
                return result
            },
            userAvatar: function() {
                return this.userInfo && this.userInfo.avatar ? this.userInfo.avatar : "/static/images/logo.png"
            },
            userName: function() {
                if (!this.userInfo) return "";
                return this.userInfo && this.userInfo.nickName ? this.userInfo.nickName : this.userInfo.userName
            },
            userIntro: function() {
                let randomList = [
                    "玉在山而草木润，渊生珠而崖不枯。——《荀子·劝学》",
                    "不积跬步，无以至千里。——《荀子·劝学》",
                    "君子曰：学不可以已。青，取之于蓝，而青于蓝。——《荀子·劝学》",
                    "三更灯火五更鸡，正是男儿读书时。黑发不知勤学早，白首方悔读书迟。——颜真卿《劝学》",
                    "学如逆水行舟，不进则退。 ——《增广贤文》"
                ]
                let randomIndex = Math.random() * randomList.length
                return this.userInfo && this.userInfo.intro ? this.userInfo.intro : randomList[getRandomInt(0,
                    randomList.length -
                    1)]
            },
            genderClass: function() {
                return [
                    this.userInfo && this.userInfo.gender ? "male" : "female"
                ]
            }
        },
        methods: {
            tapLogin() {
                gotoLoginPage();
            },
            tapItem(item) {
                let flag = item.flag;
                switch (flag) {
                    case "myClass":
                        gotoMyClassPage()
                        break;
                    case "logout":
                        logout().then(res => {
                            saveUserInfo(null);
                            saveToken(null);
                        })
                        break;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: column;

        .header {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 30rpx;
            padding: 0 40rpx;
            border-radius: 20rpx;
            height: 180rpx;
            border-radius: 90rpx;
            background: #FECF02;

            .avater {
                width: 100rpx;
                min-width: 100rpx;
                height: 100rpx;
                border-radius: 50rpx;
                border: 4rpx solid #333;
                margin-right: 40rpx;
            }

            .info-box {
                display: flex;
                flex-direction: column;

                .row {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-bottom: 20rpx;
                    color: #333;

                    .name {
                        font-size: 36rpx;
                        font-weight: 700;
                    }

                    .gender {
                        width: 50rpx;
                        height: 50rpx;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        border-radius: 25rpx;
                        margin-left: 20rpx;
                    }

                    .male {
                        background: #ffaa00;
                    }

                    .female {
                        background: #dd8064;
                    }

                    .intro {
                        font-size: 22rpx;
                    }

                    .login {
                        font-size: 40rpx;
                        font-weight: 800;
                    }
                }

                .row:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .section {
            margin: 30rpx;
            padding: 30rpx 40rpx;
            display: flex;
            flex-direction: column;
            background: #fff;
            box-shadow: 0 0 20rpx #88888844;
            border-radius: 25rpx;

            .row {
                border-bottom: 1rpx solid #ececec;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                min-height: 100rpx;

                .title {
                    height: 80rpx;
                    line-height: 80rpx;
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 700;
                }
            }
        }
    }
</style>